<template>
    <div class="template-container">
        <div class="tags-container">
            <el-tag @close="handleDelet(tag)" class="tag" v-for="tag in tags" :key="tag" closable>
                {{ tag }}
            </el-tag>
        </div>
        <div class="tags-list">
            <div class="tags-list-title">
                <span>{{ title }}</span>
            </div>
            <div class="tags-list-container">
                <el-tag @click="handleAdd(item)" :type="tags.includes(item) ? 'info' : ''" class="tags-list-container-item" v-for="(item, index) in templateTags" :key="index">{{ item }}+</el-tag>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        templateTags: {
            type: Array,
            default: []
        },
        title: {
            type: String,
            default: ''
        },
        maxTags: { // 最大标签数量
            type: Number,
            default: null // 将默认值设置为 null 或者 undefined
        }
    },
    data() {
        return {
            tags: []
        }
    },
    methods: {
        /**
         * 
         * @param {String} item 新增至tags里的key
         */
        handleAdd(item) {
            if (this.tags.includes(item)) {
                this.$message.warning('请勿重复添加！！！');
            } else if (this.maxTags && this.tags.length >= this.maxTags) { // 判断是否超过最大标签数量
                this.$message.warning(`最多只能选择 ${this.maxTags} 个标签`);
            }  else {
                this.tags.push(item)
            }
        },
        /**
         * 
         * @param {String} item 删除tags里的key
         */
        handleDelet(item) {
            this.tags.splice(this.tags.indexOf(item), 1)
        },
        getTags() {
            return this.tags
        },
        setTags(tags) {
            this.tags = tags
        }

    }
}
</script>
<style lang="scss" scoped>
.template-container {
    width: 100%;
    display: flex;
    flex-direction: column;

    .tags-container {
        width: 90%;
        min-height: 40px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 5px;
        .tag{
            margin: 0 5px 5px 0;
        }
    }

    .tags-list {
        width: 90%;
        margin-top: 12px;
        display: flex;
        flex-direction: row;

        .tags-list-title {
            flex: 1;
        }

        .tags-list-container {
            flex: 8;

            .tags-list-container-item {
                margin: 0 5px 5px 0;
            }

            .tags-list-container-item:hover {
                cursor: pointer;
            }
        }
    }
}
</style>
